<!--
 * @Description: file content
 * @Author: oooh
 * @Date: 2024-04-26 11:16:35
 * @LastEditors: hujunjie hujunjie@shudatech.cn
 * @LastEditTime: 2024-12-13 13:45:22
 * @FilePath: \Civil_Servant_Performance_PC\src\views\work\democratic-evaluation\index.vue
-->
<template>
  <div class="app-container">
    <div class="text-banner">
      <span>干部培训申报</span>
      <el-button
        class="ml-10"
        size="mini"
        type="primary"
        circle
        icon="el-icon-refresh"
        plain
        @click="handleRefresh"
      />
    </div>
    <el-table :data="tableList" border style="width: 100%" v-loading="loading">
      <el-table-column label="序号" type="index" align="center">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="培训日期" width="160" align="center">
        <template slot-scope="scope">
          <el-date-picker
            v-model="scope.row.date"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            v-show="!checkWorkPlanDisabled(scope.row.auditStatusDict)"
            :clearable="false"
          >
          </el-date-picker>
          <div
            v-show="checkWorkPlanDisabled(scope.row.auditStatusDict)"
            class="pre-wrap align-center"
          >
            {{ scope.row.date }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="theme"
        label="培训主题"
        min-width="180"
        align="center"
      >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.theme"
            placeholder="输入培训主题"
            v-show="!checkWorkPlanDisabled(scope.row.auditStatusDict)"
          ></el-input>
          <div
            v-show="checkWorkPlanDisabled(scope.row.auditStatusDict)"
            class="pre-wrap align-center"
          >
            {{ scope.row.theme }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="培训地点"
        min-width="180"
        align="center"
      >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.address"
            type="textarea"
            placeholder="输入培训地点"
            :rows="1"
            :autosize="{ minRows: 1, maxRows: 5 }"
            v-show="!checkWorkPlanDisabled(scope.row.auditStatusDict)"
          ></el-input>
          <div
            v-show="checkWorkPlanDisabled(scope.row.auditStatusDict)"
            class="pre-wrap align-center"
          >
            {{ scope.row.address || "-" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="remarks"
        label="备注"
        min-width="180"
        align="center"
      >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.remarks"
            type="textarea"
            placeholder="输入备注"
            :rows="1"
            :autosize="{ minRows: 1, maxRows: 5 }"
            v-show="!checkWorkPlanDisabled(scope.row.auditStatusDict)"
          ></el-input>
          <div
            v-show="checkWorkPlanDisabled(scope.row.auditStatusDict)"
            class="pre-wrap align-center"
          >
            {{ scope.row.remarks || "-" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="civilServantId"
        label="参与干部"
        min-width="180"
        align="center"
      >
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.civilServantId"
            placeholder="输入干部名称查询"
            class="ml-10"
            clearable
            filterable
            multiple
            style="width: 90%"
            v-show="!checkWorkPlanDisabled(scope.row.auditStatusDict)"
          >
            <el-option
              v-for="item in civilOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <div
            v-show="checkWorkPlanDisabled(scope.row.auditStatusDict)"
            class="pre-wrap align-center"
          >
            {{ scope.row.civilServantName || "-" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="操作"
        align="center"
        width="140"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            v-show="checkBtnVisible('revocation', scope.row.auditStatusDict)"
            class="color-warning"
            size="mini"
            @click.stop="handleWorkPlanRevocation(scope.row)"
            v-hasPermi="['work:training:revocation']"
          >
            [审核中]点击撤回
          </el-button>
          <ApprovalLog
            :biz-id="scope.row.id"
            v-show="checkBtnVisible('approval', scope.row.auditStatusDict)"
          >
            <el-button type="text" class="color-warning" size="mini">
              [审核中]
            </el-button>
          </ApprovalLog>
          <ApprovalLog
            :biz-id="scope.row.id"
            v-show="checkBtnVisible('finish', scope.row.auditStatusDict)"
          >
            <el-button
              type="text"
              size="mini"
              class="color-success"
              icon="el-icon-check"
              >[审核通过]</el-button
            >
          </ApprovalLog>

          <ApprovalLog
            :biz-id="scope.row.id"
            v-show="checkBtnVisible('resubmit', scope.row.auditStatusDict)"
          >
            <el-button
              type="text"
              icon="el-icon-warning-outline"
              size="mini"
              @click.stop="handleWorkPlanSaveOrSubmit(scope.row, 'submit')"
              class="color-danger"
              v-hasPermi="['work:training:submit']"
            >
              [被退回]重新提交
            </el-button>
          </ApprovalLog>
          <el-button
            type="text"
            v-show="
              checkBtnVisible(
                'save',
                scope.row.auditStatusDict,
                scope.row.submitMark
              )
            "
            size="mini"
            @click.stop="handleWorkPlanSaveOrSubmit(scope.row, 'save')"
            v-hasPermi="['work:training:save']"
          >
            保存
          </el-button>

          <el-button
            type="text"
            v-show="
              checkBtnVisible(
                'submit',
                scope.row.auditStatusDict,
                scope.row.submitMark
              )
            "
            size="mini"
            @click.stop="handleWorkPlanSaveOrSubmit(scope.row, 'submit')"
            v-hasPermi="['work:training:submit']"
          >
            提交
          </el-button>
          <el-button
            type="text"
            v-show="
              scope.row.id &&
              checkBtnVisible(
                'remove',
                scope.row.auditStatusDict,
                scope.row.submitMark
              )
            "
            size="mini"
            @click.stop="handleWorkPlanRemove(scope.row)"
            v-hasPermi="['work:training:remove']"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
  
  <script>
import {
  list,
  revocation,
  remove,
  add,
  update,
} from "@/api/work/work-training";
import ApprovalLog from "@/components/ApprovalLog";
import { list as listCivil } from "@/api/organization/civil-servant";

export default {
  name: "work_training",
  dicts: ["biz_work_year_list"],
  props: {},
  components: { ApprovalLog },
  data() {
    return {
      loading: false,
      civilOptions: [],
      tableList: [],
      tableListItem: {
        civilServantId: "",
        date: "",
        theme: "",
        address: "",
        remarks: "",
      },
      queryParams: {
        year: "",
      },
    };
  },
  computed: {},
  created() {
    this.getList();
    this.getCivilList();
  },
  methods: {
    getCivilList() {
      this.civilOptions = [];
      listCivil({
        assessmentMark: true,
      }).then((res) => {
        this.civilOptions = res.rows.map((item) => {
          return { label: item.name, value: item.id };
        });
      });
    },
    // 工作删除
    handleWorkPlanRemove(raw) {
      let removeContent = `您正在删除 【${raw.name}】 主题培训申报`;
      this.$confirm(
        `${removeContent}，数据删除后将无法找回，请确认删除`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "error",
          beforeClose: (action, instance, done) => {
            if (action === "confirm") {
              const loading = this.$loading({
                target: ".el-message-box",
                lock: true,
                text: "正在删除...",
                spinner: "el-icon-loading",
                background: "rgba(255,255,255,0.6)",
              });
              remove({ id: raw.id })
                .then(() => {
                  loading.close();
                  this.getList();
                  this.$modal.msgSuccess("已删除");
                  done();
                })
                .catch(() => {
                  loading.close();
                  done();
                });
            } else {
              done();
            }
          },
        }
      );
    },
    // 培训申报保存或提交
    async handleWorkPlanSaveOrSubmit(raw, operationType = "save") {
      let params = JSON.parse(JSON.stringify(raw));
      params.civilServantId = raw.civilServantId.join(",");
      params.submitMark = false;

      if (operationType === "submit") {
        params.submitMark = true;
      }

      if (raw.id) {
        // 更新
        await update(params).then((res) => {
          if (operationType === "save") {
            this.$modal.msgSuccess("培训申报已更新");
          } else if (operationType === "submit") {
            this.$modal.msgSuccess("培训申报已提交");
          }
        });
      } else {
        // 新增
        await add(params).then((res) => {
          if (operationType === "save") {
            this.$modal.msgSuccess("培训申报已添加");
          } else if (operationType === "submit") {
            this.$modal.msgSuccess("培训申报已提交");
          }
        });
      }

      this.getList();
    },
    // 培训申报撤回
    handleWorkPlanRevocation(raw) {
      revocation({ id: raw.id }).then((res) => {
        this.$modal.msgSuccess("已撤回");
        this.getList();
      });
    },
    // 审核提示内容格式输出
    aduitContentFormat(raw) {
      let content = [];
      content.push(`<p>审核意见：${raw.auditRemark || " - "}</p>`);
      content.push(`<p>审核时间：${raw.auditTime || " - "}</p>`);
      return content.join("");
    },
    // 校验按钮显示
    // 功能类型、审核状态、提交状态
    checkBtnVisible(type, audit, submit) {
      switch (type) {
        case "revocation":
          // 撤回
          return audit === "DSH";
        case "submit":
          // 提交
          return !submit && audit !== "SHBTG";
        case "save":
        case "remove":
          // 保存 && 删除
          return !submit;
        case "resubmit":
          // 退回重新提交
          return audit === "SHBTG";
        case "finish":
          // 审核通过
          return audit === "SHTG";
        case "approval":
          // 审核中（不可撤回）
          return audit === "SHZ";
        default:
          break;
      }
    },
    // 校验培训申报表单字段是否可填
    checkWorkPlanDisabled(audit) {
      let audits = ["SHTG", "DSH", "SHZ"];
      if (audits.indexOf(audit) !== -1) {
        return true;
      }
      return false;
    },
    getList() {
      this.loading = true;
      list(this.queryParams)
        .then((res) => {
          this.loading = false;
          this.tableList = res.rows.map((item) => {
            return {
              ...item,
              civilServantId: item.civilServantId.split(",") || [],
            };
          });
          this.tableList.unshift(
            JSON.parse(JSON.stringify(this.tableListItem))
          );
        })
        .catch((err) => (this.loading = false));
    },
    // 刷新
    handleRefresh() {
      this.getList();
    },
  },
};
</script>
  
  <style lang="scss" scoped>
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: auto;
}

::v-deep .el-input-number--medium {
  width: auto;
}

::v-deep .el-button [class*="el-icon-"] + span {
  margin-left: 0;
}
</style>
  